<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>sms 升级部署 </title>
    <link href="//cdn.staticfile.org/layui/2.8.2/css/layui.css" rel="stylesheet">
    <style>
        .log-line {
            font-size: 15px;
            padding: 3px;
        }

        .logDiv {
            width: 100%;
            height: 700px;
            overflow: auto;
        }
    </style>
</head>

<body>
<!-- HTML Content -->
<ul class="layui-nav" lay-filter="demo-filter-nav">
    <li class="layui-nav-item">
        <a href="/upgradeCode">升级代码</a>
    </li>
    <li class="layui-nav-item">
        <a href="/appConf">配置文件</a>
    </li>
    <li class="layui-nav-item">
        <a href="/script">监控脚本</a>
    </li>
    <li class="layui-nav-item">
        <a href="/nginxConf">nginx配置</a>
    </li>
    <li class="layui-nav-item layui-this">
        <a href="/allLog">全部日志</a>
    </li>
    <li class="layui-nav-item">
        <a href="/errorLog">错误日志</a>
    </li>
</ul>

<!--升级模块-->
<div class="layui-bg-gray module" style="padding: 16px;">
    <div class="layui-card">
        <div class="layui-card-header">
            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius" lay-active="e1">
                开始查看实时日志
            </button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius" lay-active="e2">
                停止查看实时日志
            </button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius" lay-active="e4">
                查看最近1000行日志
            </button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius" lay-active="e3">
                清空当前日志
            </button>
        </div>
        <div class="layui-card-body">
            <p>实时日志</p>
            <div class="logDiv">
                <pre class="layui-code code-demo" id="logDiv"></pre>
            </div>
        </div>
    </div>
</div>


<script src="//cdn.staticfile.org/layui/2.8.2/layui.js"></script>
<script>
        layui.use(['jquery'], function () {
            // 引用 jquery
            var $ = layui.$;

            var element = layui.element;
            var layer = layui.layer;

            // 导航点击事件
            element.on('nav(demo-filter-nav)', function (elem) {
                console.log(elem); // 得到当前点击的元素 jQuery 对象
            });

            // 升级代码模块
            var util = layui.util;
            var ws;
            var ip = window.location.host.split(":")[0];

            util.event('lay-active', {
                e1: function () {
                    if (!window.WebSocket) {
                        if (window.MozWebSocket) {
                            window.WebSocket = window.MozWebSocket;
                        } else {
                            $('#logDiv').prepend("<p>你的浏览器不支持websocket</p>");
                        }
                    }
                    if (ws && ws.readyState == 1) {
                        layer.msg("ws已经是打开状态了, 请60s之后再次重试。");
                    } else {
                        $("#logDiv").html("");
                        ws = new WebSocket('ws://' + ip + ':18080/ws/log?app=sms&options=-f');
                        ws.onopen = function (evt) {
                            $('#logDiv').append("<div class='log-line'>查看实时日志的websocket链接成功</div>");
                        }
                        ws.onclose = function (evt) {
                            $('#logDiv').append("<div class='log-line'>查看实时日志的websocket成功关闭</div>");
                        }
                        ws.onmessage = function (evt) {
                            let item = $("<div class='log-line'></div>");
                            item.text(evt.data);
                            $("#logDiv").append(item);
                        }
                    }
                },
                e2: function () {
                    if (ws && ws.readyState == 1) {
                        ws.close();
                    } else {
                        layer.msg("在打开webscoket连接后才能关闭链接。");
                    }
                },
                e3: function () {
                    $("#logDiv").html("");
                },
                e4: function () {
                    if (!window.WebSocket) {
                        if (window.MozWebSocket) {
                            window.WebSocket = window.MozWebSocket;
                        } else {
                            $('#logDiv').prepend("<p>你的浏览器不支持websocket</p>");
                        }
                    }
                    if (ws && ws.readyState == 1) {
                        layer.msg("ws已经是打开状态了, 请30s之后再次重试。");
                    } else {
                        $("#logDiv").html("");
                        ws = new WebSocket('ws://' + ip + ':18080/ws/log?app=sms&options=-n 1000');
                        ws.onopen = function (evt) {
                            $('#logDiv').append("<div class='log-line'>查看最近1000行日志的websocket链接成功, 链接将于30s后自动关闭.</div>");
                        }
                        ws.onclose = function (evt) {
                            $('#logDiv').append("<div class='log-line'>查看最近1000行日志的websocket成功关闭</div>");
                        }
                        ws.onmessage = function (evt) {
                            let item = $("<div class='log-line'></div>");
                            item.text(evt.data);
                            $("#logDiv").append(item);
                        }
                        // 10秒钟后 自动关闭 执行结束事件
                        window.setTimeout(
                            function () {
                                if (ws && ws.readyState == 1) {
                                    layer.msg("将关闭查看最近1000行日志的websocket链接.");
                                    ws.close();
                                } else {
                                    layer.msg("查看最近1000行日志的websocket链接已经是关闭状态.");
                                }
                            }
                            , 1000 * 10);
                    }
                },
            });
        });
















</script>
</body>

</html>